<template>
  <div class="login">
    <img class="touxiang" src="../assets/img/touxiang.png" alt="" />
    <div class="logina">
      <input
        type="text"
        v-model="phone"
        placeholder="请输入手机号"
        @input="phoneInput"
      />
      <input
        type="password"
        v-model="possWord"
        @input="posswordInput"
        placeholder="请输入密码"
      />
      <input type="password" v-model="possWord2" placeholder="请再次输入密码" />
      <input type="button" @click="register" value="注 册" />
      <span>注册即你同意<i>《用户协议》</i>和<i>《隐私权政策》</i></span>
      <p @click="toLogin">账 号 密 码 登 录 ></p>
      <div class="img">
        <img src="../assets/img/disanfangdenglu.png" alt="" />
        <img src="../assets/img/disanfangdenglu_QQ.png" alt="" />
        <img src="../assets/img/disanfangdenglu-zhifubao.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  // 定义属性
  name: "Register",
  data() {
    return {
      phone: "",
      possWord: "",
      possWord2: "",
      sendBtn: true,
      hasSpec: true,
    };
  },
  methods: {
    toLogin() {
      this.$router.push({ path: "/login" });
    },
    phoneInput() {
      let reg = /^1[3-9]\d{9}$/g;
      // 如果符合手机号正则，按钮禁用取消，按钮外观改变
      if (reg.test(this.phone)) {
        this.sendBtn = true;
      } else {
        this.sendBtn = false;
      }
    },
    posswordInput() {
      let reg1 = /\d/;
      let reg2 = /[a-z]/gi;
      var reg3 = /[$@#&%]/;
      if (
        reg1.test(this.possWord) &&
        reg2.test(this.possWord) &&
        reg3.test(this.possWord)
      ) {
        this.hasSpec = true;
      } else {
        this.hasSpec = false;
      }
      console.log(this.hasSpec);
    },
    register() {
      if (this.phone && this.possWord && this.possWord2) {
        if (this.sendBtn) {
          if (this.possWord != this.possWord2) {
            Toast.fail("两次输入的密码不一致");
          } else {
            if (
              this.possWord.length >= 6 &&
              this.possWord.length <= 18 &&
              this.hasSpec == true
            ) {
              this.axios
                .get(
                  "http://49.235.71.189:5334/UserLogin/add/" +
                    this.phone +
                    "/" +
                    this.possWord
                )
                .then((res) => {
                  console.log(res.data.stateCode);
                  if (res.data.stateCode == true) {
                    // localStorage.setItem("User", this.phone);
                    this.$router.push({ path: "/login" });
                    Toast.fail("注册成功");
                  } else {
                    Toast.fail("此账号已注册");
                  }
                });
            } else {
              Toast.fail(
                "密码格式：必须包含数字、字母、特殊字符、长度在6-18位"
              );
            }
          }
        } else {
          Toast.fail("账号格式为11位的手机号");
        }
      } else {
        Toast.fail("请输入账号和密码");
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang='scss' scoped>
.login {
  width: 100%;
  height: 100%;
  font-size: 16px;
  background: url(../assets/img/bg.jpg) no-repeat;
  background-size: 100%;
  .touxiang {
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    border-radius: 100%;
    margin-top: 80px;
    margin-left: 138px;
  }
  .logina {
    margin: 0 65px;
    input {
      margin-top: 10px;
      width: 240px;
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      border-radius: 100px;
      padding: 5px 20px;
      font-size: 16px;
      &:first-of-type {
        margin-top: 10px;
      }
      &:last-of-type {
        background-color: #ffac66;
        margin-top: 15px;
        color: #fff;
        font-size: 18px;
        box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.2);
      }
    }
    span {
      font-size: 10px;
      color: #666666;
      i {
        color: #2e5ef9;
      }
    }
    p {
      text-align: center;
      padding: 10px;
      color: #f9b468;
    }
    .img {
      display: flex;
      justify-content: space-between;
      margin-top: 50px;
    }
  }
}
</style>